<template>
  <div>
    <div class="box">
      <section>
        <div class="icon">
          <i @click="goback" class="el-icon-arrow-left"></i>
        </div>
        <div class="title">
          <span>{{questionDetail.title}}</span>
          <header>
            <span>{{questionDetail.isAnonymous===0?questionDetail.studentName:'匿名提问'}}</span>
            <span>{{ questionLabel[questionDetail.label].label }}</span>
          </header>
        </div>
        <div class="time">{{ questionDetail.createTime }}</div>
        <p> {{questionDetail.content}}</p>
        <div class="reply-c" v-if="replyList.length>0">
          <div v-for="(item) in replyList" :key="item.id"  class="reply-every">
            <div>{{ item.replyName }} 回复:</div>
            <p>{{ item.content }}</p>
          </div>
        </div>
        <div class="reply-c" v-else>
          暂无回复
        </div>
        <div class="changePage">
          <el-pagination
              background
              prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </section>
    </div>
    <indexBottom></indexBottom>
  </div>
</template>

<script>
import indexBottom from "../../components/indexBottom";
import {getQuestionDetail,getReplyList} from "../../api/answer/index";
import {mapState} from "vuex";
export default {
  name: "answerQuestionsDetail",
  components: {
    indexBottom
  },
  created() {
    this.questionId=this.$route.query.id
    this.onLoad();
    this.getReply();
  },
  computed: {
    ...mapState({
      questionLabel: state => state.dict.dictTree.question_label['arr'],
    })
  },
  data(){
    return{
      questionId:"",
      questionDetail:'',
      replyList:[],
      currentPage:1,
      pageSize:5,
      total:0,
    }
  },
  methods: {
    onLoad(){
      getQuestionDetail({id:this.questionId}).then(res=>{
        console.log(res)
        this.questionDetail=res.data
      })
    },
    //获取评论
    getReply(){
      let obj={
        id:this.questionId,
        pageNum:this.currentPage,
        pageSize:this.pageSize
      }
      getReplyList(obj).then(res=>{
        console.log(res)
        this.replyList=res.rows
        this.total=res.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getReply()
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
.box {
  margin-top: 80px;
}

.text-right {
  margin: 20px 0;
}

.icon {
  margin-bottom: 20px;
}

section {
  font-size: 18px;
  color: rgba(48, 48, 48, 1);
  text-align: left;
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background: white;

  .title {
    margin-bottom: 10px;
    font-size: 18px;

    header {
      float: right;

      span {
        font-size: 14px;
        color: #aaa;
        margin-right: 20px;
      }

      span:nth-of-type(2) {
        color: #66b1ff;
      }
    }
  }

  .time {
    color: #aaa;
    font-size: 14px;
  }

  div {
    font-size: 16px;
  }

  p {
    margin: 20px 0;
  }
}
.reply-c{
  padding: 20px 0;
  min-height: 100px;
  .reply-every{
  }
}
.changePage{
  text-align: right;
}

</style>
